<template>
  <div class="area-select">
    <el-input v-if="readonly" disabled v-model="selectData.value"></el-input>
    <el-cascader
      v-else
      ref="areasFrom"
      v-model="localValue"
      :options="options"
      separator="/"
      :props="cascaderProps"
      @change="handleChange"
      :placeholder="parameter.promptTemplate"
      :disabled="disabled"
      filterable
    ></el-cascader>
  </div>
</template>

<script>
import globalService from "@/services/globalService";
export default {
  name: "AreaSelect",
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      } 
    },
    value: [Object, String],
    disabled: Boolean,
    parameter: {
      type: Object,
      default: () => {
        return {}
      } 
    }
  },
  data() {
    return {
      cascaderProps: {
        value: 'areaCode',
        children: 'children',
        emitPath: true, // 返回完整的路径，而不仅仅是最后一级的值
        checkStrictly: false, // 不允许选择任意一级
        expandTrigger: 'click', // 鼠标悬停时展开子菜单
      },
      options: [],
      localValue: [],
      provinceList: [],
      cityList: [],
      areaList: [],
      readonly: false,
      selectData: {},
      loading: false,
    };
  },
  watch: {
    
  },
  created() {
    this.getAreaTree();
    this.readonly = Boolean(this.$route.query.readonly);
    if(this.value){
     this.setData();
    }
  },
  methods: {
    setData(){
      this.selectData = JSON.parse(this.value) || {};
      this.localValue = JSON.parse(this.value).checkedData;
    },
    getAreaTree() {
      // 1 省 2 省/市 3 省/市/区
      const areaType = this.parameter?.parameterValue?.areaType;
      globalService.areaTreeList({}).then((res) => {
        if(res.data.resultCode == '0000') {
          const list = res.data.areaTree || [];
          switch (areaType) {
            case 1:
              this.options = this.filterProv(list || []);
              break;
            case 2:
              this.options = this.filterCity(list || []);
              break;
            case 3:
              this.options = this.filterArea(list || []);
              break;
            default:
              this.options = this.filterArea(list || []);
              break;
          }
        }
      });
    },
    // 省
    filterProv(data) { 
      let newTree = (data || []).map((e) => ({
        label: e.areaName,
        value: e.areaCode,
        areaCode: e.areaCode,
      }))
      return newTree
    },
    // 省市
    filterCity(data) { 
      let newTree = (data || []).map((e) => ({
        label: e.areaName,
        value: e.areaCode,
        areaCode: e.areaCode,
        children: (e.childList || []).map(it => {
          return {
            label: it.areaName,
            value: it.areaCode,
            areaCode: it.areaCode,
          }
        }),
      }))
      return newTree
    },
    // 省市区
    filterArea(data) {
      let newTree = (data || []).map((e) => ({
        label: e.areaName,
        value: e.areaCode,
        areaCode: e.areaCode,
        children: e.childList,
      }))
      newTree.forEach(
        (x) => x.children && (x.children = this.filterArea(x.children))
      )
      return newTree
    },
    handleChange(val) {
      let nodeData = this.$refs.areasFrom.getCheckedNodes()[0];
      this.selectData = {
        value: nodeData.pathLabels.join('/'),
        checkedData: val,
        pathLabels: nodeData.pathLabels,
      }
      this.$emit('changeRule');
      this.$emit('input',JSON.stringify(this.selectData));
      console.log(this.selectData,'nodeData');
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
